<template>
  <div class="model">
    <van-popup v-model="popUpshow" position="right" :style="{ height: '100%', width: '90%' }">
      <div class="pop-top">
        <p>筛选</p>
        <p @click="emptyClick">清空</p>
      </div>
      <div class="pop-content">
        <van-tabs v-model="popactive" v-if="eventShow">
          <van-tab title="行政区划">
            <van-tree-select
              :style="{ height: '100%' }"
              :items="items"
              :active-id.sync="items.activeId"
              :main-active-index.sync="items.activeId"
              @click-nav="onNavClick"
            >
              <template #content>
                <ul class="right-content">
                  <li v-for="(item, index) in secondarymenuList" :key="index">
                    <p>{{ item.regionName }}</p>
                    <p>{{ item.eventCount }}</p>
                  </li>
                </ul>
              </template>
            </van-tree-select>
          </van-tab>
          <van-tab title="事件条件" class="event-conditions">
            <div class="event-conditions-box">
              <p class="event-status-title">事件状态</p>
              <div class="event-status-box">
                <div
                  class="event-status"
                  :class="{ eventstatusActive: eventStatusIndex == index }"
                  v-for="(item, index) in eventStatusTag"
                  :key="index"
                  @click="eventStatusClick(item, index)"
                >
                  {{ item.description }}
                </div>
              </div>
              <p class="event-status-title">处置部门</p>
              <div class="event-status-box disposal-department">
                <div
                  class="event-status"
                  :class="{ eventTypeActive: eventtypeIndex == index }"
                  v-for="(item, index) in disposaldepartment"
                  :key="index"
                  @click="eventtypeClick(item, index)"
                >
                  {{ item.label }}
                </div>
              </div>
              <p class="event-status-title">上报时间</p>
              <van-row>
                <van-col :span="11">
                  <van-field
                    readonly
                    clickable
                    name="expirationData"
                    v-model="searchForm.reportBeginTime"
                    placeholder="请输入开始时间"
                    @click="dateOpenPopup('1')"
                  />
                </van-col>
                <van-col :span="2">
                  <p class="pop-line">-</p>
                </van-col>
                <van-col :span="11">
                  <van-field
                    readonly
                    clickable
                    name="expirationData"
                    v-model="searchForm.reportEndTime"
                    placeholder="请输入结束时间"
                    @click="dateOpenPopup('2')"
                  />
                </van-col>
              </van-row>
            </div>
          </van-tab>
        </van-tabs>
        <div v-if="!eventShow">
          <div class="region-title">行政区划</div>
          <van-tree-select
            :style="{ height: '100%' }"
            :items="items"
            :active-id.sync="items.activeId"
            :main-active-index.sync="items.activeId"
            @click-nav="onNavClick"
          >
            <template #content>
              <ul class="right-content">
                <li v-for="(item, index) in secondarymenuList" :key="index">
                  <p>{{ item.regionName }}</p>
                  <p>{{ item.eventCount }}</p>
                </li>
              </ul>
            </template>
          </van-tree-select>
        </div>
      </div>
      <div class="pop-bottom">
        <button @click="emptyClick">清空</button>
        <button @click="determine">确定</button>
      </div>
    </van-popup>
    <!-- 日期 -->
    <van-popup v-model="datePopupShow" round position="bottom" @close="date = new Date()">
      <van-datetime-picker
        v-model="date"
        type="date"
        title="选择年月日"
        @cancel="datePopupShow = false"
        @confirm="dateOnConfirm"
      />
    </van-popup>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import Cockpit from '@/api/cockpit'
export default {
  name: 'index',
  data() {
    return {
      popUpshow: false, // 筛选显示
      erjiMenu: false, // 督办切换,
      eventShow: true,
      popactive: 0,
      treeactive: 0,
      items: [],
      eventStatusTag: [],
      disposaldepartment: [],
      currentDate: new Date(2021, 0, 17),
      datePopupShow: false,
      date: '',
      timedivision: '',
      secondarymenu: '', // 二级菜单传参数
      secondarymenuList: [], // 二级菜单数据
      eventStatusIndex: -1, // 事件状态切换
      eventtypeIndex: -1, // 事件类型选中切换class
      searchForm: {
        eventStatus: '',
        communityRegion: '',
        eventType: '',
        reportBeginTime: '',
        reportEndTime: ''
      }
    }
  },
  computed: {
    ...mapState({
      user: state => state.userInfo
    })
  },
  mounted() {
    this.adlmenu()
    this.adminInit()
  },
  methods: {
    dateOpenPopup(item) {
      if (item === '1') {
        this.timedivision = 1
      } else {
        this.timedivision = 2
      }
      this.datePopupShow = true
    },
    dateOnConfirm(val) {
      const year = val.getFullYear()
      let month = val.getMonth() + 1
      let day = val.getDate()
      let hour = val.getHours()
      let minute = val.getMinutes()
      if (month >= 1 && month <= 9) {
        month = `0${month}`
      }
      if (day >= 1 && day <= 9) {
        day = `0${day}`
      }
      if (hour >= 0 && hour <= 9) {
        hour = `0${hour}`
      }
      if (minute >= 0 && minute <= 9) {
        minute = `0${minute}`
      }
      if (this.timedivision === 1) {
        this.searchForm.reportBeginTime = `${year}-${month}-${day}`
      } else {
        this.searchForm.reportEndTime = `${year}-${month}-${day}`
      }
      this.datePopupShow = false
    },
    // 选项格式化函数
    formatter(type, value) {
      if (type === 'year') {
        return `${value}年`
      } else if (type === 'month') {
        return `${value}月`
      } else if (type === 'day') {
        return `${value}日`
      } else if (type === 'hour') {
        return `${value}时`
      } else if (type === 'minute') {
        return `${value}分`
      } else if (type === 'second') {
        return `${value}秒`
      }
      return value
    },
    leadershipClick() {
      this.popUpshow = true
      this.popactive = 0
      this.eventStatusIndex = -1
      this.eventtypeIndex = -1
    },
    // 点击左边菜单
    onNavClick(index) {
      const substationCode = this.items[index].activeId
      this.secondarymenu = substationCode
      this.secondarymenuClick()
    },
    // 二级菜单
    secondarymenuClick() {
      Cockpit.Online.queryRegion({ communityRegion: this.secondarymenu }).then(res => {
        const data = { ...res.data }
        if (data.status === 0) {
          this.searchForm.communityRegion = this.secondarymenu
          const reversedata = data.data.reverse()
          this.secondarymenuList = reversedata
        } else {
          this.$toast(data.message)
        }
      })
    },
    // 事件状态和一级事件分类的接口
    adminInit() {
      Cockpit.Online.adminInit({}).then(res => {
        const data = { ...res.data }
        if (data.status === 0) {
          this.eventStatusTag = data.data.appQueryEventStatus
          this.disposaldepartment = data.data.eventType
          console.log(data)
        } else {
          this.$toast(data.message)
        }
      })
    },
    // 清空
    emptyClick() {
      this.searchForm.reportBeginTime = ''
      this.searchForm.reportEndTime = ''
      this.popactive = 0
      this.eventStatusIndex = -1
      this.eventtypeIndex = -1
    },
    // 事件状态点击
    eventStatusClick(item, index) {
      this.eventStatusIndex = index
      this.searchForm.eventStatus = item.code
    },
    // 事件类型点击
    eventtypeClick(item, index) {
      this.eventtypeIndex = index
      this.searchForm.eventType = item.value
    },
    adlmenu() {
      Cockpit.Online.queryRegion({ regionCode: this.user.regionCode }).then(res => {
        const data = { ...res.data }
        if (data.status === 0) {
          const reversedata = data.data.reverse()
          this.secondarymenu = reversedata[0].regionCode
          this.searchForm.communityRegion = reversedata[0].regionCode
          for (var i = 0; i < reversedata.length; i++) {
            this.items.push({
              activeId: reversedata[i].regionCode,
              text: reversedata[i].regionName
            })
          }
          this.secondarymenuClick()
        } else {
          this.$toast(data.message)
        }
      })
    },
    determine() {
      this.$emit('alleventSerch', this.searchForm)
      this.popUpshow = false
      this.popactive = 0
      this.eventStatusIndex = -1
      this.eventtypeIndex = -1
      // this.searchForm = {}
    }
  }
}
</script>

<style scoped lang="less">
@import '~@/assets/style/EventOverview/model.less';
.region-title {
  width: 100%;
  height: 94px;
  font-size: 28px;
  font-weight: 500;
  color: #3cbdd0;
  line-height: 28px;
  border-bottom: 1px solid #e5e5e5;
  padding: 32px;
  box-sizing: border-box;
}
</style>
